<template>
  <div class="fa-option-setting">
    <ElFormItem prop="checkOptions" :rules="rules">
      <template #label>
        <span class="fa-option-setting__label">
          选项设置 <span class="count">({{ options.length }})</span>
        </span>

        <a v-if="!disabled" class="fa-widget-link" @click="optionsEdit.visible = true">批量操作</a>

        <OptionsEdit
          v-if="optionsEdit.visible"
          :data="data"
          :options="optionsEdit.options"
          @close="optionsEdit.visible = false"
          @success="optionsEdit.import"
        />
      </template>

      <DragSort class="fa-widget-setting__option-list group-options" :list="options" :disabled="disabled" handle>
        <DragSortItem
          v-for="(item, index) in options"
          :key="item.key"
          :index="index"
          class="group-option"
          :class="{ 'is-option-active': activeIndex === index }"
        >
          <ElCheckbox
            :class="{ 'is-radio': isRadio, 'is-readonly': isReadonly }"
            :disabled="isReadonly || disabled"
            v-model="item.value"
            @change="select(item)"
          />

          <ElInput
            class="group-option__input"
            v-model="item.label"
            clearable
            placeholder="请输入选项值"
            :maxlength="maxLength"
            :disabled="disabled"
            @focus="activeIndex = index"
            @blur="
              () => {
                activeIndex = -1
                item.label = item.label.trim()
              }
            "
          />

          <a v-if="removable" class="group-setting-btn fa-icon-delete" @click="remove(index)"></a>
        </DragSortItem>
      </DragSort>

      <ElTooltip
        v-if="addButton.visible"
        :content="addButton.disabledTips"
        :disabled="!addButton.disabledTips"
        placement="top"
      >
        <a
          class="el-icon-plus add-button group-setting-btn"
          :class="{ 'is-disabled': !!addButton.disabledTips }"
          @click="add()"
        ></a>
      </ElTooltip>
    </ElFormItem>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRef, toRefs } from 'vue'
import { Widget } from '@/models'
import useCheckGroup from './useCheckGroup'
import useOptionsEdit from '../checkbox-group/useOptionsEdit'

import OptionsEdit from './OptionsEdit.vue'
import DragSort from '@/components/drag-sort/DragSort.vue'
import DragSortItem from '@/components/drag-sort/DragSortItem.vue'

/** 单、复选框 设置 */
export default defineComponent({
  name: 'FaCheckGroupSetting',
  components: { OptionsEdit, DragSort, DragSortItem },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    const checkOptions = useCheckGroup(data)

    /** 选项编辑 */
    const optionsEdit = useOptionsEdit({
      getOptions: () => checkOptions.options.map(o => o.label),

      callback: options => {
        const checks = props.data.checkOptions
        const fromLen = checks.length
        const toLen = options.length

        // 删除超出的选项
        if (fromLen > toLen) {
          checks.splice(toLen)
        }

        options.forEach((label, index) => {
          const check = checks[index]

          if (check) {
            check.label = label
          } else {
            // 新增选项
            checkOptions.add(label)
          }
        })
      }
    })

    return {
      ...toRefs(checkOptions),

      /** 选项编辑 */
      optionsEdit,

      rules: [
        {
          validator(rule: object, value: string | number, callback: (e?: Error) => void) {
            if (data.value.checkOptions.some(item => !item.label)) {
              return callback(new Error('请输入选项值'))
            }

            callback()
          },

          trigger: 'blur'
        }
      ]
    }
  }
})
</script>

<style lang="scss">
.fa-option-setting {
  .el-form-item__label {
    justify-content: space-between;
    padding: 0;
  }

  .fa-option-setting__label {
    .count {
      color: $color-info;
    }
  }

  .group-setting-btn {
    margin-left: 4px;
    color: $color-text-placeholder;
    font-size: 14px;
    cursor: pointer;
    user-select: none;

    &:hover {
      color: $color-primary;
    }
  }

  .add-button {
    display: block;
    margin: 4px 0 0 0;
    color: $color-primary;
    line-height: 30px;
    text-align: center;
    border: 1px dashed rgba($color-primary, 0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    user-select: none;

    &:hover {
      border-color: $color-primary;
    }

    &:active {
      background-color: rgba($color-primary, 0.05);
    }

    &.is-disabled {
      border-color: rgba($color-primary, 0.6);
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  .group-options {
    max-height: 36 * 10px;
  }

  .group-option {
    margin: 0 -8px;
    padding: 4px 8px;

    &:hover,
    &.is-option-active {
      background-color: $background-color-secondary;
    }

    .fa-drag-sort-item__handle {
      margin-left: -8px;
    }

    .el-checkbox {
      overflow: hidden;
      line-height: 1;

      ~ .group-option__input {
        margin-left: 4px;
      }
    }
  }

  .group-option__input {
    flex: 1 1 0px;

    .el-input__inner {
      padding-right: 20px;
      padding-left: 8px;
      border-color: transparent;

      &:hover {
        border-color: $border-color;
      }

      &:focus {
        border-color: $color-primary;
      }
    }
  }
}
</style>
